<template>
    <div class="login-box">
        <el-card>
            <template #header>
                <h4>中工文章管理系统</h4>
            </template>
            <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
                <el-form-item prop="username">
                    <el-input type="text" v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"
                        clearable></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"
                        clearable show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onLogin">登 录</el-button>
                    <el-button @click="onReset">重 置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from 'element-plus'
import useLoginStore from '@/stores/login.js'
import { useRouter } from 'vue-router'
import { useRoute } from "vue-router";
const route = useRoute()
const loginStore = useLoginStore()
const router = useRouter()
const loginFormRef = ref(null)
const loginForm = reactive({
    username: 'admin',
    password: 'admin'
})
const loginFormRules = {
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { min: 4, max: 10, message: '用户名长度在 4 - 10 位之间', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 5, max: 20, message: '密码长度在 5 - 20 位之间', trigger: 'blur' }
    ]
}
const onLogin = () => {
    loginFormRef.value.validate(async valid => {
        if (!valid) {
            ElMessage.error('用户名或密码错误')
            return
        }
        try {
            await loginStore.loginAction(loginForm)
            await loginStore.getUserInfoAction()
            ElMessage.success('欢迎您，' + (loginStore.userInfo.name || loginStore.userInfo.username))
            router.push(route.query.redirectUrl || '/')
        } catch (e) {
            ElMessage.error(e.message)
        }
    })
}
const onReset = () => loginFormRef.value.resetFields()
</script>

<style lang="scss" scoped>
.login-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: url('@/assets/background.jpg') center/cover;

    .el-card {
        width: 45vw;
        height: 50vh;
        box-shadow: 30px -30px 3px rgba($color: #000000, $alpha: 0.5);
        border: 0;

        :deep(.el-card__header) {
            display: flex;
            align-items: center;
            justify-content: center;
            border: 0;
            background: var(--el-color-primary);
            color: white;
            height: 90px;
            font-size: 30px;
            letter-spacing: 7px;
        }

        .el-form {
            padding: 15px;

            .el-input {
                height: 45px;
                margin: 5px 10px;
                opacity: 0.8;
            }

            .el-input:placeholder {
                color: black;
            }

            .el-button {
                border: 0;
                opacity: 1;
                margin-left: 130px;
                margin-top: 10px;
                font-size: 18px;
                width: 120px;
                height: 50px;
            }

            .el-button:nth-child(2) {
                color: (255, 255, 255, 0.8);
                background: rgb(188, 188, 188);
            }

            .el-button:nth-child(1):hover {
                background: rgb(203, 91, 108);
            }

            .el-button:nth-child(1):active {
                background: rgb(133, 20, 33);
            }

            .el-button:nth-child(2):hover {
                color: white;
                background: gray;
            }

            .el-button:nth-child(2):active {
                color: (255, 255, 255, 0.8);
                background: rgb(188, 188, 188);
            }
        }
    }

    :deep(.el-card__body::before) {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url('@/assets/logo.jpg') center;
        background-repeat: no-repeat;
        background-size: 150px;
        opacity: 0.5;
    }
}
</style>